<template>
  <div class="container">
    <Row style="height: 100%">
      <i-col span="21" style="height: 100%">
        <div class="luckysheet" id="defRightMenu"></div>
      </i-col>
      <i-col span="3" style="height: 100%">
        <Card :bordered="false">
          <p slot="title">自定义右键菜单</p>
          <p>f12调取控制台查看点击情况</p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { cellData } from "../../demoData/cell/originValue/cellData";
export default {
  name: "defRightMenu",
  data() {
    return {
      options: {
        container: "defRightMenu", // 设定DOM容器的id
        title: "自定义右键菜单", // 设定表格名称
        lang: "zh", // 设定表格语言
        data: [
          //数据
          {
            name: "表一",
            color: "",
            index: 1,
            status: 1,
            order: 1,
            celldata: cellData(),
            config: {
              columnlen: {
                0: 200,
              },
            },
          },
        ],
        cellRightClickConfig: {
          copy: false, // 复制
          copyAs: false, // 复制为
          paste: false, // 粘贴
          insertRow: false, // 插入行
          insertColumn: false, // 插入列
          deleteRow: false, // 删除选中行
          deleteColumn: false, // 删除选中列
          deleteCell: false, // 删除单元格
          hideRow: false, // 隐藏选中行和显示选中行
          hideColumn: false, // 隐藏选中列和显示选中列
          rowHeight: false, // 行高
          columnWidth: false, // 列宽
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          sort: false, // 排序选区
          filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          // link: false, // 插入链接
          // data: false, // 数据验证
          // cellFormat: false, // 设置单元格格式
          customs: [
            {
              title: "test",
              onClick: function (clickEvent, event, params) {
                console.log("function test click", clickEvent, event, params);
              },
            },
          ],
        },
      },
    };
  },
  methods: {
    //提交
    fCellMousedown(cell, position, sheet, ctx) {
      this.$Message.info("点击了单元格！");
      if (position.c === 0 && position.r === 0) {
        window.open(cell.v);
      }
      console.log(
        "cell:" + JSON.stringify(cell) + ";position:" + JSON.stringify(position)
      );
    },
  },
  mounted() {
    // 初始化表格
    luckysheet.create(this.options);
  },
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
